<template>
  <div class="info">
    <Zhutu></Zhutu>
    <div class="block"></div>
    <div class="contner_box">
      <div class="fang_contner">
        <div class="fang_box">
          <el-empty
            v-if="this.formList.length == 0"
            class="empty_box"
            description="没有民宿信息"
          ></el-empty>
          <RoomInfo
            v-else
            v-for="(item, index) in formList"
            :item="item"
            :key="index"
            :id="item.id"
            :img="item.img"
            :title="item.title"
            :price="item.price"
            :des="item.des"
          ></RoomInfo>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import FootBar from '../../components/FootBar.vue';
import RoomInfo from "../../components/RoomInfo.vue";
import Zhutu from "../../components/Zhutu.vue";

import { queryHomestay } from "../../http/axios";
export default {
  data() {
    return {
      formList: [],
    };
  },
  mounted() {
    queryHomestay().then((res) => {
      // console.log(res.obj.data);
      this.formList = res.obj.data;
    });
  },
  methods: {
    goInfo(item) {
      this.$router.go(`/detail/${item.id}`);
      // console.log("123");
    },
  },
  components: {
    Zhutu,
    RoomInfo,
    // FootBar
  },
};
</script>

<style scoped>
.content_box {
  display: flex;
  justify-content: center;
}
.info {
  width: 100%;
}
.block {
  height: 100px;
  width: 100%;
}
.contner_box {
  display: flex;
  justify-content: center;
}
.fang_contner {
  width: 1400px;
  height: 300px;
}
.fang_box {
  display: flex;
  /* justify-content: center; */
  flex-wrap: wrap;
}
</style>
